import CardView from "@/components/CardView";
import PageTitle from "@/components/PageTitle";
import { defineComponent } from "vue";
import BackGroundImage from "@/components/BackGroundImage";
import RoundInfo from "@/components/RoundInfo";
import GreyBlock from "@/components/GreyBlock";
import TextView from "@/components/TextView";
import RoundEdgeButtonGroup from "@/components/RoundEdgeButtonGroup";
import { useRequest } from "./request";
import MapPointPopover from "@/components/MapPointPopover";
export default defineComponent({
    setup() {
        const { WorkInfo, } = useRequest()


        const render1 = () => {
            const getData = WorkInfo.value
            const data = {
                title: getData.title,
                text: getData.area + ' ' + getData.town,
                src: getData.logoUrl,
                workPrice: getData.workPrice + '/元/人/天',
                area: getData.area,
                town: getData.town,
                workType: '类型：' + getData.workType + ' 用工时间：' + getData.workDay + '天',
                lat:parseFloat(getData.lat) ,
                lng:getData.lat
            }
            const buttons = [
                {
                    text: '申请用工',
                    // onClick: () => {
                    //     phoneClick(e.phone)
                    //   },
                }
            ]
            console.log('用工详情', getData);
            return (
                <div>
                    <CardView class={'px-0 py-0'}>
                        <BackGroundImage>
                            <CardView >
                                <RoundInfo {...data} class="info-cell-gray">
                                </RoundInfo>
                                <TextView class=" ml-50 text-15">{data.workType}</TextView>
                                <div class="text-[#FE8923] ml-50 text-15">{data.workPrice}</div>
                                <GreyBlock class="mt-[12px]">
                                    <TextView >{data.area + ' ' + data.town}</TextView>
                                    <RoundEdgeButtonGroup data={buttons} />
                                </GreyBlock>
                            </CardView>
                        </BackGroundImage>
                        {
                            render2()
                        }
                        
                    </CardView>



                </div>

            )
        }
        const render2=()=>{
            const getData = WorkInfo.value
            const {lat,lng} = getData
            
            return (
                <CardView title="帮工地址" class={''}>
                            <MapPointPopover lat={Number(lat)} lng={ Number(lng)} />
                        </CardView>
            )
        }


        return () => {

            return <>

                <PageTitle title="帮工详情" >
                    <CardView class={'px-0'}>
                    {render1()}

                    </CardView>
                </PageTitle>
            </>
        }
    }
}
)